<script setup>
import {onMounted, ref} from "vue";
import router from "@/router";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";

const fileList = ref([]);
const fileListLow = ref();
const handleSuccess = (uploadFile) => {
  fileListLow.value = uploadFile.data;
}
const handleRemove = () => {
  if (fileListLow !== undefined) {
    doctor.value.imgUrl = null;
    fileList.value.pop();
    axios.post(BASE_URL + '/v1/remove?imgUrl=' + fileListLow.value);
  }
};

const change = ref(false);
const check = ref(false);
const department = ref([]);
const doctor = ref({});
const c1 = ref([{value: '院长医师'}, {value: '副院长医师'}, {value: '主任医师'}, {value: '副主任医师'}, {value: '医师'}]);
const c2 = ref([{value: '男'}, {value: '女'}]);
const c3 = ref([{value: '在职'}, {value: '离职'}, {value: '禁用'}])
const c4 = ref([{value: '身份证'}, {value: '护照'}, {value: '驾驶证'}, {value: '警官证'}, {value: '港澳通行证'}, {value: '其他证件'}])
const c5 = ref([{value: '已婚'}, {value: '未婚'}, {value: '离异'}])
const c6 = ref([{value: '汉族'}])
const c7 = ref([{value: '博士'}, {value: '硕士'}, {value: '本科'}, {value: '大专'}])

const userToken = ref(localStorage.getItem('user-token')?
    JSON.parse(localStorage.getItem('user-token')):null);
const userId = ref(localStorage.getItem('user-id')?
    JSON.parse(localStorage.getItem('user-id')):null);

const customHeaders = ref({'Authorization': userToken.value})

onMounted(() => {
  if (userToken.value == null) {
    ElMessage.error("请先登录!")
    router.push('/patient/login');
    return;
  }
  axios.defaults.headers.common['Authorization']=userToken.value;

  if (location.search.includes('id')) {
    let id = new URLSearchParams(location.search).get('id');
    axios.get(BASE_URL + '/v1/doctors/' + id + '/select').then((response) => {
      if (response.data.code === 20000) {
        check.value = true;
        doctor.value = response.data.data;
      }else ElMessage.error(response.data.message)
    })
  }
  if (location.search.includes('Id')) {
    let id = new URLSearchParams(location.search).get('Id');
    axios.get(BASE_URL + '/v1/doctors/' + id + '/select').then((response) => {
      if (response.data.code === 20000) {
        change.value = true;
        doctor.value = response.data.data;
      }else ElMessage.error(response.data.message)
    })
  }
  axios.get(BASE_URL + '/v1/department/select-level').then((response) => {
    if (response.data.code === 20000) {
      department.value = response.data.data;
    }else ElMessage.error(response.data.message)
  })
})

const save = () => {
  if (doctor.value.nickname == null) {
    ElMessage.error("请填写医生姓名!")
    return;
  }
  if (doctor.value.mobile == null) {
    ElMessage.error("请填写手机号!")
    return;
  }
  if (doctor.value.duties == null) {
    ElMessage.error("请选择职务!")
    return;
  }
  if (doctor.value.gender == null) {
    ElMessage.error("请选择性别!")
    return;
  }
  if (doctor.value.degree == null) {
    ElMessage.error("请选择学历!")
    return;
  }
  if (doctor.value.departmentId == null){
    ElMessage.error("请选择所属的科室!")
    return;
  }

  if (fileList.value.length > 0) {
    axios.post(BASE_URL + "/v1/remove?imgUrl=" + doctor.value.imgUrl);
    doctor.value.imgUrl = fileList.value[0].response.data;
  }

  doctor.value.userId = userId.value;
  let data = qs.stringify(doctor.value);
  if (doctor.value.id != null) {
    axios.post(BASE_URL + '/v1/doctors/change', data).then((response) => {
      if(response.data.code === 20000) {
        ElMessage.success("修改成功!")
        router.push('/admin/doctor')
      }else ElMessage.error(response.data.message)
    })
  } else {
    axios.post(BASE_URL + '/v1/doctors/add', data).then((response) => {
      if (response.data.code === 20000) {
        ElMessage.success("添加成功!")
        router.push('/admin/doctor')
      }else ElMessage.error(response.data.message)
    })
  }
}
</script>

<template>
  <el-row :gutter="10" class="rowI">
    <el-col :span="1">
      <div style="width: 5px;height: 100%;background-color: #22ccee;float: right"></div>
    </el-col>
    <el-col :span="23">
      <p style="font-weight: bold;float: left" v-if="!check&!change">新建医生</p>
      <p style="font-weight: bold;float: left" v-if="check">查看医生信息</p>
      <p style="font-weight: bold;float: left" v-if="change">更改医生信息</p>
    </el-col>
  </el-row>
  <el-row class="rowI">
    <el-col :span="20">
      <el-row class="rowI">
        <el-col :span="12">
          <el-row>
            <el-col :span="10">
              <div class="divLeft">姓名 :</div>
            </el-col>
            <el-col :span="14">
              <el-input v-model="doctor.nickname" class="colInput" :disabled="check"/>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row>
            <el-col :span="2">
              <div class="divRight">工号 :</div>
            </el-col>
            <el-col :span="22">
              <el-input v-model="doctor.username" class="colInput" disabled/>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="rowI">
        <el-col :span="12">
          <el-row>
            <el-col :span="10">
              <div class="divLeft">手机号码 :</div>
            </el-col>
            <el-col :span="14">
              <el-input v-model="doctor.mobile" class="colInput" :disabled="check"/>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row>
            <el-col :span="2">
              <div class="divRight">职务 :</div>
            </el-col>
            <el-col :span="22">
              <el-select v-model="doctor.duties" placeholder="请选择"
                         class="colInput" :disabled="check">
                <el-option v-for="item in c1" :value="item.value" />
              </el-select>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="rowI">
        <el-col :span="12">
          <el-row>
            <el-col :span="10">
              <div class="divLeft">性别 :</div>
            </el-col>
            <el-col :span="14">
              <el-select v-model="doctor.gender" placeholder="请选择"
                         class="colInput" :disabled="check">
                <el-option v-for="item in c2" :value="item.value"/>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row>
            <el-col :span="2">
              <div class="divRight">所属科室 :</div>
            </el-col>
            <el-col :span="22">
              <el-select v-model="doctor.departmentId" placeholder="请选择"
                         class="colInput" :disabled="check">
                <el-option v-for="d in department" :label="d.name" :value="d.id"/>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="rowI">
        <el-col :span="12">
          <el-row>
            <el-col :span="10">
              <div class="divLeft">学历 :</div>
            </el-col>
            <el-col :span="14">
              <el-select v-model="doctor.degree" placeholder="请选择"
                         class="colInput" :disabled="check">
                <el-option v-for="item in c7" :value="item.value"/>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row>
            <el-col :span="2">
              <div class="divRight">状态 :</div>
            </el-col>
            <el-col :span="22">
              <el-select v-model="doctor.status" placeholder="请选择"
                         class="colInput" :disabled="check">
                <el-option v-for="item in c3" :value="item.value"/>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="rowI">
        <el-col :span="12">
          <el-row>
            <el-col :span="10">
              <div class="divLeft">证件类型 :</div>
            </el-col>
            <el-col :span="14">
              <el-select v-model="doctor.documents" placeholder="请选择"
                         class="colInput" :disabled="check">
                <el-option v-for="item in c4" :value="item.value"/>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row>
            <el-col :span="2">
              <div class="divRight">证件号码 :</div>
            </el-col>
            <el-col :span="22">
              <el-input v-model="doctor.idNumber" class="colInput" :disabled="check"/>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="rowI">
        <el-col :span="12">
          <el-row>
            <el-col :span="10">
              <div class="divLeft">出生年月 :</div>
            </el-col>
            <el-col :span="14">
              <el-date-picker v-model="doctor.birthday" type="date"
                              placeholder="请选择" format="YYYY-MM-DD"
                              :disabled="check"/>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row>
            <el-col :span="2">
              <div class="divRight">婚姻情况 :</div>
            </el-col>
            <el-col :span="22">
              <el-select v-model="doctor.maritalStatus" placeholder="请选择"
                         class="colInput" :disabled="check">
                <el-option v-for="item in c5" :value="item.value"/>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="rowI">
        <el-col :span="12">
          <el-row>
            <el-col :span="10">
              <div class="divLeft">年龄 :</div>
            </el-col>
            <el-col :span="14">
              <el-input v-model="doctor.age" class="colInput" :disabled="check"/>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row>
            <el-col :span="2">
              <div class="divRight">民族 :</div>
            </el-col>
            <el-col :span="22">
              <el-select v-model="doctor.ethnicGroup" placeholder="请选择"
                         class="colInput" :disabled="check">
                <el-option v-for="item in c6" :value="item.value"/>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <div style="margin-left: 185px;width: 100px;line-height: 30px">通讯地址 :</div>
        </el-col>
        <el-col :span="20">
          <el-input v-model="doctor.address" style="width: 745px;margin-left: -255px" :disabled="check"/>
        </el-col>
      </el-row>
    </el-col>
    <el-col :span="4">
      <div style="width: 234px;height: 100%;border: 1px solid gray;margin-left: -265px">
        <img v-if="doctor.imgUrl!=null&doctor.imgUrl!==''&fileList.length===0" :src="BASE_URL+doctor.imgUrl"
             style="margin-top: 10px;border-radius: 5px;width: 214px;height: 280px"
             alt="人物头像"/>
        <img v-if="(doctor.imgUrl==null||doctor.imgUrl==='')&&fileList.length===0"
             style="margin-top: 10px;border-radius: 5px;width: 214px;height: 280px"
             src="https://demo2022.axureshop.com/2201312/images/%E6%82%A3%E8%80%85%E7%AE%A1%E7%90%86/u1990.svg"
             alt="人物头像"/>
        <el-upload
            :limit="1"
            name="file"
            list-type="picture-card"
            v-model:file-list="fileList"
            :headers="customHeaders"
            :action="BASE_URL+'/v1/upload'"
            :on-success="handleSuccess"
        >
          <el-button style="margin:31px 110px 0 0;width: 100px;background-color: #409EFF;
                color: white;border: 1px solid #409EFF" v-if="!check">
            选择
          </el-button>
          <template #file="{ file }">
            <img :src="file.url" alt="人物头像" class="fileImg"/>
          </template>
          <template #tip>
            <div v-if="fileList.length>0" style="height: 25px"/>
            <div v-if="!check">
              <div style="font-weight: bold;font-size: 15px;margin-top: 15px" class="divPhoto">照片要求:</div>
              <div class="divPhoto">1.仅支持jpg、png、bmp格式</div>
              <div class="divPhoto">2.最大不超过2000px,最小不低于160px</div>
            </div>
          </template>
        </el-upload>
        <el-button v-if="!check" style="position:absolute;top:295px;left: 1195px;width: 100px;background-color: white;
                color: #409EFF;border: 1px solid #409EFF" @click="handleRemove">
          清空
        </el-button>
      </div>
    </el-col>
  </el-row>
  <el-row class="rowI">
    <el-col :span="4">
      <div class="textDiv">个人简介 :</div>
    </el-col>
    <el-col :span="20">
      <el-input v-model="doctor.profiles" type="textarea" :rows="4"
                class="textInput" :disabled="check"/>
    </el-col>
  </el-row>
  <el-row class="rowI">
    <el-col :span="4">
      <div class="textDiv">擅长领域 :</div>
    </el-col>
    <el-col :span="20">
      <el-input v-model="doctor.field" type="textarea" :rows="3"
                class="textInput" :disabled="check"/>
    </el-col>
  </el-row>
  <el-row class="rowI">
    <el-col :span="4">
      <div class="textDiv">备注 :</div>
    </el-col>
    <el-col :span="20">
      <el-input v-model="doctor.remark" type="textarea" :rows="4"
                class="textInput" :disabled="check"/>
    </el-col>
  </el-row>
  <el-row  v-if="!check">
    <el-col :span="12">
      <el-button style="width: 80px;background-color: #409EFF;
                        color: white;margin-left: 300px"
                 @click="save">保存
      </el-button>
    </el-col>
    <el-col :span="12">
      <el-button style="width: 80px;background-color: white;
                        color: #409EFF;border: 1px solid #409EFF;
                        margin-right: 350px"
                 @click="router.push('/admin/doctor')">返回
      </el-button>
    </el-col>
  </el-row>
  <el-row v-else>
    <el-button style="width: 160px;margin: 0 auto;
                      color: #409EFF;border: 1px solid #409EFF"
               @click="router.push('/admin/doctor')">返 &nbsp; &nbsp; 回</el-button>
  </el-row>
</template>

<style scoped>
/deep/ .el-date-editor {
  margin-left: -90px;
  --el-date-editor-width: 300px;
}

/deep/ .el-upload-list--picture-card {
  width: 214px;
  height: 0;
}

/deep/ .el-upload--picture-card {
  width: 214px;
  height: 0;
  border: none;
}

/deep/ .el-upload-list__item.is-success {
  width: 214px;
  height: 280px;
  margin: 10px 0 4px 0;
}

.fileImg {
  width: 214px;
  height: 280px;
}

.divPhoto {
  font-size: 13px;
  text-align: left;
  padding-left: 20px
}

.textDiv {
  margin-left: 170px;
  width: 100px;
  line-height: 30px;
  text-align: right;
}

.textInput {
  width: 1030px;
  margin-left: -280px
}

.colInput {
  margin-right: 360px;
  width: 300px
}

.rowI {
  margin-bottom: 20px
}

.divLeft {
  width: 270px;
  height: 30px;
  line-height: 30px;
  text-align: right
}

.divRight {
  margin-left: -35px;
  width: 80px;
  height: 30px;
  line-height: 30px;
  text-align: right
}
</style>